<template>
  <view class="wallet">

    <!-- Header -->
    <view class="header white flex row-between">
      <view class="white">
        <view class="header-label xs">可提现金额</view>
        <view class="header-price m-t-20">¥{{ distributionInfo.month_earnings || 0 }}</view>
      </view>

      <!-- <router-link to="/bundle/pages/user_withdraw/user_withdraw"> -->
        <view @click="handleClickBtn2">
          <view class="header-btn br60 flex bg-white row-center md">
            <text class="iconfont icon-wallet m-r-10"></text>去提现
          </view>
        </view>
      <!-- </router-link> -->
    </view>

    <!-- Section -->
    <view class="section m-t-40">
      <view class="tab-header flex">
        <view class="tab-item" :class="{ 'active': activeTab === 'income' }" @click="switchTab('income')">
          提现记录
        </view>
        <view class="tab-item" :class="{ 'active': activeTab === 'withdraw' }" @click="switchTab('withdraw')">
          报税记录
        </view>
      </view>

      <view class="filter-section" v-if="activeTab === 'withdraw'">
        <view class="filter-item" @click="showStartDatePicker">
          <text>筛选时间</text>
          <view class="filter-value">{{ startdate || '请选择' }}</view>
        </view>
        <view class="filter-item">
          <text>—</text>
        </view>
        <view class="filter-item" @click="showEndDatePicker">
          <text>{{ enddate || '请选择' }}</text>
        </view>
      </view>

      <!-- 提现记录列表 -->
      <view v-if="activeTab === 'income'">
        <view class="tax-list1" v-if="list1.length != 0">
          <view class="list p-t-20">
            <view class="item bg-white" v-for="(item, index) in list1" :key="index">
              <!-- <router-link :to="{ path: '/bundle/pages/widthdraw_result/widthdraw_result', query: { id: item.id } }"> -->
              <view class="flex row-between">
                <view class="md ">{{ item.desc }}</view>
                <view>
                  <text class="xxl">-{{ item.money }}</text>
                </view>
              </view>
              <view class="flex row-between">
                <view class="xs muted">{{ item.create_time }}</view>
                <view class="xs" :style="{ color: [styleWithdrawStatus(item.status)] }">{{ item.status_text }}</view>
              </view>
              <view class="m-t-10 sm primary" v-if="item.description && item.status == 4">
                {{ item.description }}
              </view>
              <!-- </router-link> -->
            </view>
          </view>
        </view>
        <view v-else class="empty-box">
          <image src="../../static/shop.png" class="empty-img"></image>
          <view>~ 暂无提现记录 ~</view>
        </view>
      </view>
      <!-- 报税记录列表 -->
      <view class="tax-list1" v-if="activeTab === 'withdraw'">
        <view class="tax-list1" v-if="list2.length != 0">
          <view class="list p-t-20">
            <view class="item bg-white" v-for="(item, index) in list2" :key="index">
              <view class="rows">
                <view class="items">税款所属期：{{ item.times }}</view>
                <view class="items">总业务金额(元)：{{ item.allBussMoney }}</view>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="empty-box">
          <image src="../../static/shop.png" class="empty-img"></image>
          <view>~ 暂无报税记录 ~</view>
        </view>
      </view>
    </view>

    <!-- 自定义筛选弹出层 -->
    <view v-if="isFilterVisible" class="custom-popup-mask" @click="closeFilterPopup">
      <view class="custom-popup" @click.stop>
        <view class="filter-popup-header">
          <text class="filter-popup-title">筛选条件</text>
          <text class="filter-popup-close" @click="closeFilterPopup">×</text>
        </view>

        <view class="filter-popup-content">
          <view class="filter-section">
            <view class="filter-section-title">交易类型</view>
            <view class="filter-options">
              <view class="filter-option" :class="{ 'active': tempTypeFilter === '' }" @click="tempTypeFilter = ''">
                全部
              </view>
              <view v-for="(name, type) in transactionTypes" :key="type" class="filter-option"
                :class="{ 'active': tempTypeFilter === Number(type) }" @click="tempTypeFilter = Number(type)">
                {{ name }}
              </view>
            </view>
          </view>

          <view class="filter-section">
            <view class="filter-section-title">时间范围</view>
            <view class="filter-options">
              <view class="filter-option" :class="{ 'active': tempDateFilter === '' }" @click="tempDateFilter = ''">
                全部时间
              </view>
              <view class="filter-option" :class="{ 'active': tempDateFilter === 'today' }"
                @click="tempDateFilter = 'today'">
                今天
              </view>
              <view class="filter-option" :class="{ 'active': tempDateFilter === 'week' }"
                @click="tempDateFilter = 'week'">
                本周
              </view>
              <view class="filter-option" :class="{ 'active': tempDateFilter === 'month' }"
                @click="tempDateFilter = 'month'">
                本月
              </view>
            </view>
          </view>
        </view>

        <view class="filter-popup-footer">
          <view class="filter-popup-btn filter-popup-reset" @click="resetFilter">重置</view>
          <view class="filter-popup-btn filter-popup-apply" @click="applyFilter">确定</view>
        </view>
      </view>
    </view>

    <!-- 日期选择器 - 开始日期 -->
    <u-picker v-model="showStartPicker" mode="time" :params="dateParams" @confirm="confirmStartDate"
      @cancel="cancelStartDate"></u-picker>

    <!-- 日期选择器 - 结束日期 -->
    <u-picker v-model="showEndPicker" mode="time" :params="dateParams" @confirm="confirmEndDate"
      @cancel="cancelEndDate"></u-picker>
    <!-- 提现操作 -->
    <u-popup v-model="showPopup" mode="center" border-radius="14" :closeable="false" :safe-area-inset-bottom="true"
      mask-close-able>
      <view class="popup-content">
        <view class="popup-header">
          <view class="popup-title">提现操作</view>
          <view class="cancle-btn" @click="handleClickClose">
            <u-icon name="close" color="#303133" size="28"></u-icon>
          </view>
        </view>

        <!-- 提现金额 -->
        <view class="withdraw-money-wrap m-t-20 bg-white">
          <view class="flex withdraw-money p-b-20">
            <view class="flex flex-1">
              <text class="font-size-46 m-r-10 normal">¥</text>
              <!-- v-model="form.money"  -->
              <u-input placeholder="0.00" :custom-style="{
                'font-size': '66rpx'
              }" />
            </view>
            <view class="flex-col flex-1 text-right">
              <text class="xs primary" @tap="">全部提现</text>
              <text class="xs muted m-t-10">可提现金额 ¥</text>
            </view>
          </view>
          <view class="muted xs m-t-30">提示：提现需扣除服务费6%</view>
        </view>

        <!-- 确认提交 -->
        <button class="withdraw-submit m-t-30 white br60" @tap="onSubmit" size="lg">确认提交</button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import {
  getRect
} from '@/utils/tools'
import {
  getWithdrawRecords,
  setTax,
  getDistribution,
} from "@/api/user.js"
export default {
  mixins: [MescrollMixin],
  components: {
    // 不再引用uni-popup组件
  },
  data() {
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth() + 1;
    const day = currentDate.getDate();
    return {
      height: 414,
      withdrawInfo: {},
      withdrawLists: [],
      incomeLists: [],
      activeTab: 'income',
      mescroll: null,
      incomeLoading: false,
      incomePage: 1,
      incomeMore: true,
      isScrollToBottom: false,
      isFilterVisible: false,
      list1: [],
      list2: [],
      earnings: 0,
      yztel: '',
      uid: '',
      showPopup: false,
      startdate: '',
      enddate: '',
      // 日期选择相关
      showStartPicker: false,
      showEndPicker: false,
      dateParams: {
        year: {
          start: year - 1,
          end: year
        },
        month: {
          start: 1,
          end: 12
        },
        day: {
          start: 1,
          end: 31
        }
      },
      distributionInfo: {},
    }
  },
  computed: {
    // 筛选提示文本
    filterHintText() {
      let hint = '';
      if (this.typeFilter || this.dateFilter) {
        if (this.typeFilter) {
          hint += this.typeFilterText;
        }
        if (this.dateFilter) {
          if (hint) hint += ' / ';
          hint += this.dateFilterText;
        }
      } else {
        hint = '全部记录';
      }
      return hint;
    }
  },

  onLoad(options) {
    console.log(options);
    this.earnings = options.earnings;
    this.uid = options.uid;
    this.yztel = options.yztel;
    this.getDate();
    this.getDistributionFun();
    this.getData();
  },

  onReady() {
    this.getHeight();
  },

  onShow() {

  },
  methods: {
    // 分销会员信息
    async getDistributionFun() {
      const {
        data,
        code
      } = await getDistribution()
      if (code == 1) {
        this.distributionInfo = data;
      }
    },
    getDate() {
      const date = new Date();
      const year = date.getFullYear(); // 获取当前年份
      const month = date.getMonth() + 1; // 获取当前月份（注意月份从0开始）
      const day = date.getDate(); // 获取当前日期
      const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
      console.log(formattedDate); // 输出当前日期
      this.startdate = formattedDate;
      this.enddate = formattedDate;
    },
    switchTab(tab) {
      console.log('切换到标签:', tab);
      this.activeTab = tab;

      this.$nextTick(() => {
        this.getHeight();
      });

      if (tab == 'income') {
        this.getData();
      } else {
        this.getData2();
      }
    },
    async getHeight() {
      try {
        const sys = uni.getSystemInfoSync();
        // 计算可用高度：屏幕高度 - 状态栏高度 - 导航栏高度 - 内容区域padding
        this.height = sys.windowHeight - sys.statusBarHeight - 44 - 40;
        console.log('计算的高度:', this.height);

        // 确保高度至少为100px
        if (this.height < 100) {
          this.height = 100;
        }
      } catch (error) {
        console.error('获取高度失败:', error);
        // 设置一个默认高度
        this.height = 500;
      }
    },
    styleWithdrawStatus(status) {
      switch (status) {
        case 1: return '#0CC21E';
        case 2: return '#666666';
        case 3: return '#FF2C3C';
        case 4: return '#FF2C3C';
      }
    },
    //提现记录
    getData() {
      getWithdrawRecords({
        page_size: 1,
        page_no: 100,
      }).then(({
        data
      }) => {
        this.list1 = data.list;
      }).catch((error) => {
        console.log(error);
      })
    },
    //报税记录
    getData2() {
      let obj = {
        uid: this.uid,
        yztel: this.yztel,
        startdate: this.startdate,
        enddate: this.enddate,
      }

      setTax(obj).then(res => {
        console.log(res);
        // this.list2 = [{"times":"2023-01-01至2023-03-31","allBussMoney":"0.71","allmoney":"0.71","sburls":"https://jl-tenxun.oss-cn-shenzhen.aliyuncs.com/data/9602/20230420175001319514.pdf","wszmurls":"https://jl-tenxun.oss-cn-shenzhen.aliyuncs.com/data/9602/20230420171101319514.pdf"}];
      })
    },
    handleClickbtn() {
      this.showPopup = true;
    },
    handleClickClose() {
      this.showPopup = false;
    },
    // 日期选择相关方法
    showStartDatePicker() {
      this.showStartPicker = true;
    },
    showEndDatePicker() {
      this.showEndPicker = true;
    },
    confirmStartDate(e) {
      const { year, month, day } = e;
      this.startdate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
      this.showStartPicker = false;
      this.getData2();
    },
    confirmEndDate(e) {
      const { year, month, day } = e;
      this.enddate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
      this.showEndPicker = false;
      this.getData2();
    },
    cancelStartDate() {
      this.showStartPicker = false;
    },
    cancelEndDate() {
      this.showEndPicker = false;
    },
    handleClickBtn2() {
      uni.navigateTo({
        url: '/bundle/pages/user_withdraw/user_withdraw?flag=' + this.earnings,
      })
    },
  }

}
</script>

<style lang="scss">
.wallet {
  background-color: #f8f9fc;
  background-image:
    linear-gradient(120deg, rgba($-color-primary, 0.02) 0%, transparent 70%),
    radial-gradient(circle at 90% 10%, rgba($-color-primary, 0.04) 0%, transparent 30%),
    radial-gradient(circle at 10% 90%, rgba(#6E45E2, 0.03) 0%, transparent 40%);
  min-height: 100vh;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
  overflow-x: hidden;

  .header {
    margin: 20rpx 30rpx 0;
    padding: 50rpx 40rpx 60rpx;
    border-radius: 28rpx;
    background: linear-gradient(135deg, $-color-primary, lighten($-color-primary, 18%));
    box-shadow:
      0 20rpx 40rpx rgba($-color-primary, 0.3),
      0 8rpx 16rpx rgba($-color-primary, 0.2),
      inset 0 2rpx 3rpx rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    transform: translateZ(0);

    // 光泽效果
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 40%;
      background: linear-gradient(to bottom,
          rgba(255, 255, 255, 0.15) 0%,
          rgba(255, 255, 255, 0.05) 60%,
          rgba(255, 255, 255, 0) 100%);
    }

    // 装饰圆形
    &::after {
      content: '';
      position: absolute;
      bottom: -80rpx;
      right: 20%;
      width: 220rpx;
      height: 220rpx;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
      z-index: 0;
    }

    // 装饰形状
    .decoration {
      position: absolute;
      width: 240rpx;
      height: 240rpx;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.06);
      top: -120rpx;
      right: -60rpx;
      z-index: 0;
      box-shadow: inset 0 0 20rpx rgba(255, 255, 255, 0.1);
      animation: floatAnimation 20s infinite alternate ease-in-out;

      &::before {
        content: '';
        position: absolute;
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        bottom: -40rpx;
        left: -180rpx;
        animation: floatAnimation 15s infinite alternate-reverse ease-in-out;
      }

      &::after {
        content: '';
        position: absolute;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        bottom: -240rpx;
        left: -40rpx;
        animation: floatAnimation 18s infinite alternate-reverse ease-in-out;
      }

      @keyframes floatAnimation {
        0% {
          transform: translateY(0) rotate(0deg);
        }

        50% {
          transform: translateY(-15rpx) rotate(5deg);
        }

        100% {
          transform: translateY(5rpx) rotate(-5deg);
        }
      }
    }

    &-label {
      opacity: 0.95;
      font-weight: 500;
      position: relative;
      z-index: 1;
      letter-spacing: 2rpx;
      font-size: 28rpx;
      text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);

      &::before {
        content: '';
        display: inline-block;
        width: 16rpx;
        height: 16rpx;
        background: #fff;
        border-radius: 50%;
        margin-right: 12rpx;
        vertical-align: middle;
        opacity: 0.7;
        box-shadow: 0 0 10rpx rgba(255, 255, 255, 0.8);
      }
    }

    &-price {
      font-size: 80rpx;
      font-weight: bold;
      position: relative;
      z-index: 1;
      text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
      letter-spacing: 2rpx;
      margin-top: 20rpx;
      animation: pulseText 2s infinite alternate ease-in-out;
      background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.85) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
      transform: translateZ(0);

      @keyframes pulseText {
        0% {
          transform: scale(1);
        }

        100% {
          transform: scale(1.02);
        }
      }

      &:active {
        animation-play-state: paused;
        transform: scale(1.05);
      }
    }

    &-btn {
      padding: 20rpx 40rpx;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 50rpx;
      color: $-color-primary;
      font-weight: 600;
      box-shadow:
        0 10rpx 20rpx rgba(0, 0, 0, 0.15),
        0 3rpx 6rpx rgba(0, 0, 0, 0.1),
        inset 0 -2rpx 5rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      position: relative;
      z-index: 1;
      border: 1rpx solid rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(10px);
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
      }

      &:active {
        transform: translateY(4rpx) scale(0.97);
        box-shadow:
          0 4rpx 8rpx rgba(0, 0, 0, 0.12),
          0 1rpx 3rpx rgba(0, 0, 0, 0.1),
          inset 0 -1rpx 3rpx rgba(0, 0, 0, 0.05);
      }

      .iconfont {
        font-size: 36rpx;
        margin-right: 12rpx;
        position: relative;
        top: 2rpx;
        animation: swingIcon 3s infinite ease-in-out;
        transform-origin: bottom center;
        display: inline-block;

        @keyframes swingIcon {

          0%,
          100% {
            transform: rotate(0deg);
          }

          20% {
            transform: rotate(-10deg);
          }

          40% {
            transform: rotate(5deg);
          }

          60% {
            transform: rotate(-5deg);
          }

          80% {
            transform: rotate(2deg);
          }
        }
      }
    }
  }

  .data-cards {
    margin: 20rpx 30rpx;
    perspective: 1000rpx; // 3D视角效果

    .data-card {
      flex: 1;
      background: #fff;
      padding: 40rpx 30rpx;
      border-radius: 24rpx;
      margin: 0 15rpx;
      box-shadow:
        0 8rpx 30rpx rgba(0, 0, 0, 0.07),
        0 1rpx 3rpx rgba(0, 0, 0, 0.05);
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      overflow: hidden;
      position: relative;
      border: 1rpx solid rgba(0, 0, 0, 0.04);
      transform: rotateX(2deg) translateZ(0);
      transform-style: preserve-3d;
      backface-visibility: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 8rpx;
        background: linear-gradient(90deg, $-color-primary, lighten($-color-primary, 20%));
        opacity: 0.9;
      }

      &:first-child {
        margin-left: 0;

        &::before {
          background: linear-gradient(90deg, #FF9D33, #FFD447);
        }
      }

      &:last-child {
        margin-right: 0;

        &::before {
          background: linear-gradient(90deg, #4FACFE, #00F2FE);
        }
      }

      &:active {
        transform: rotateX(0deg) translateY(3rpx) scale(0.98);
        box-shadow: 0 3rpx 10rpx rgba(0, 0, 0, 0.06);
      }

      .data-value {
        font-size: 44rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 16rpx;
        position: relative;
        display: inline-block;

        &::after {
          content: '';
          position: absolute;
          bottom: -8rpx;
          left: 0;
          width: 40%;
          height: 4rpx;
          border-radius: 4rpx;
          background: rgba($-color-primary, 0.15);
        }
      }

      .data-label {
        font-size: 26rpx;
        color: #999;
        letter-spacing: 1rpx;
        display: flex;
        align-items: center;

        &::before {
          content: '';
          display: inline-block;
          width: 8rpx;
          height: 8rpx;
          border-radius: 50%;
          background: $-color-primary;
          opacity: 0.5;
          margin-right: 10rpx;
        }
      }
    }
  }

  .section {
    margin: 20rpx 30rpx 20rpx;
    background: #fff;
    border-radius: 24rpx;
    box-shadow:
      0 10rpx 40rpx rgba(0, 0, 0, 0.06),
      0 2rpx 6rpx rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: relative;
    border: 1rpx solid rgba(0, 0, 0, 0.03);

    .tab-header {
      padding: 0 20rpx;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
      display: flex;
      justify-content: space-around;

      .tab-item {
        padding: 32rpx 20rpx;
        font-size: 30rpx;
        color: #666;
        position: relative;
        transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
        flex: 1;
        text-align: center;

        &.active {
          color: $-color-primary;
          font-weight: 600;

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 6rpx;
            background: $-color-primary;
            border-radius: 6rpx 6rpx 0 0;
            transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
          }
        }

        &:not(.active)::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 0%;
          height: 6rpx;
          background: $-color-primary;
          border-radius: 6rpx 6rpx 0 0;
          transition: all 0.3s ease;
          opacity: 0;
        }

        &:not(.active):hover::after {
          left: 40%;
          width: 20%;
          opacity: 0.3;
        }
      }
    }

    .filter-button-bar {
      padding: 20rpx;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .filter-hint {
        font-size: 26rpx;
        color: #666;
        padding: 10rpx 0;
        display: flex;
        align-items: center;

        &::before {
          content: '';
          display: inline-block;
          width: 12rpx;
          height: 12rpx;
          border-radius: 50%;
          background: $-color-primary;
          margin-right: 12rpx;
          opacity: 0.7;
        }
      }

      .filter-button {
        padding: 12rpx 28rpx;
        background: #f5f7fa;
        border-radius: 30rpx;
        font-size: 26rpx;
        color: #666;
        display: flex;
        align-items: center;
        transition: all 0.3s;
        border: 1rpx solid rgba(0, 0, 0, 0.03);

        &:active {
          background: #eef0f5;
          transform: scale(0.97);
        }

        .filter-button-text {
          margin-right: 12rpx;
        }

        .iconfont {
          font-size: 24rpx;
          color: $-color-primary;
        }
      }
    }

    .content {
      padding-bottom: 30rpx;

      .wallet-cell {
        padding: 30rpx 20rpx;
        margin-bottom: 20rpx;
        border-bottom: 1rpx solid rgba(0, 0, 0, 0.03);
        transition: all 0.3s;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          left: 30rpx;
          right: 30rpx;
          bottom: 0;
          height: 1rpx;
          background: rgba(0, 0, 0, 0.03);
        }

        &:active {
          background: rgba($-color-primary, 0.02);
        }

        &:last-child {
          border-bottom: none;

          &::after {
            display: none;
          }
        }

        .remark {
          font-weight: 500;
          color: #333;
          margin-bottom: 8rpx;
        }

        .time {
          font-size: 24rpx;
          color: #999;
        }

        .money {
          font-weight: 600;
          font-size: 34rpx;
          color: #333;
          margin-bottom: 8rpx;

          &.income-color {
            color: #3ECF8E;
          }
        }

        .lighter {
          font-size: 24rpx;
          color: #999;
        }
      }

      .empty-box {
        padding: 20rpx;

        .empty-icon {
          width: 240rpx;
          height: 240rpx;
          margin-bottom: 30rpx;
          opacity: 0.7;
          animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
          0% {
            transform: translateY(0);
          }

          50% {
            transform: translateY(-15rpx);
          }

          100% {
            transform: translateY(0);
          }
        }

        .empty-text {
          color: #999;
          font-size: 28rpx;
          letter-spacing: 2rpx;
        }
      }

      .loading-box,
      .loading-more,
      .no-more {
        padding: 20rpx;
        color: #999;
        font-size: 26rpx;
        letter-spacing: 1rpx;

        .loading {
          width: 36rpx;
          height: 36rpx;
          border: 3rpx solid rgba($-color-primary, 0.1);
          border-top: 3rpx solid $-color-primary;
          border-radius: 50%;
          margin-right: 16rpx;
          animation: spin 1s linear infinite;
        }

        @keyframes spin {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }
      }

      .no-more {
        position: relative;

        &:before,
        &:after {
          content: '';
          position: absolute;
          top: 50%;
          width: 60rpx;
          height: 1rpx;
          background: rgba(0, 0, 0, 0.1);
        }

        &:before {
          left: calc(50% - 150rpx);
        }

        &:after {
          right: calc(50% - 150rpx);
        }
      }
    }
  }

  // 自定义弹出层
  .custom-popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4rpx);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    animation: fadeIn 0.3s ease;

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }
  }

  .custom-popup {
    width: 100%;
    background: #fff;
    border-radius: 30rpx 30rpx 0 0;
    overflow: hidden;
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.1);

    @keyframes slideUp {
      from {
        transform: translateY(100%);
      }

      to {
        transform: translateY(0);
      }
    }
  }

  .filter-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

    .filter-popup-title {
      font-size: 34rpx;
      font-weight: bold;
      color: #333;
      position: relative;
      padding-left: 20rpx;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 20%;
        height: 60%;
        width: 6rpx;
        background: $-color-primary;
        border-radius: 6rpx;
      }
    }

    .filter-popup-close {
      font-size: 38rpx;
      color: #999;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      transition: all 0.2s;

      &:active {
        background: #f5f5f5;
        transform: rotate(90deg);
      }
    }
  }

  .filter-popup-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 30rpx;

    .filter-section {
      padding: 20rpx 0;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

      &:last-child {
        border-bottom: none;
      }

      .filter-section-title {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 24rpx;
        color: #333;
        display: flex;
        align-items: center;

        &::after {
          content: '';
          flex: 1;
          height: 1rpx;
          background: rgba(0, 0, 0, 0.05);
          margin-left: 20rpx;
        }
      }

      .filter-options {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10rpx;

        .filter-option {
          width: calc(33.33% - 20rpx);
          margin: 10rpx;
          padding: 18rpx 0;
          text-align: center;
          background-color: #f8fafc;
          color: #666;
          font-size: 26rpx;
          border-radius: 12rpx;
          transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          position: relative;
          overflow: hidden;
          border: 1rpx solid rgba(0, 0, 0, 0.03);

          &:active {
            transform: scale(0.96);
          }

          &.active {
            background-color: rgba($-color-primary, 0.08);
            color: $-color-primary;
            font-weight: 500;
            border: 1rpx solid rgba($-color-primary, 0.2);
            box-shadow: 0 2rpx 8rpx rgba($-color-primary, 0.1);

            &::before {
              content: '';
              position: absolute;
              right: -10rpx;
              bottom: -10rpx;
              width: 30rpx;
              height: 30rpx;
              background: $-color-primary;
              opacity: 0.2;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }

  .filter-popup-footer {
    display: flex;
    border-top: 1rpx solid rgba(0, 0, 0, 0.05);

    .filter-popup-btn {
      flex: 1;
      padding: 34rpx 0;
      text-align: center;
      font-size: 30rpx;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
      z-index: 1;

      &:active::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1000rpx;
        height: 1000rpx;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(0);
        z-index: -1;
        animation: ripple 0.6s ease-out;
      }

      @keyframes ripple {
        to {
          transform: translate(-50%, -50%) scale(1);
          opacity: 0;
        }
      }

      &.filter-popup-reset {
        background-color: #f8f8f8;
        color: #666;
      }

      &.filter-popup-apply {
        background: linear-gradient(135deg, $-color-primary, lighten($-color-primary, 10%));
        color: #fff;
        font-weight: 500;
        box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.08);
      }
    }
  }


  .empty-img {
    width: 240rpx;
    height: 240rpx;
  }

  .empty-box {
    text-align: center;
    margin-top: 200rpx;
    margin-bottom: 200rpx;
    font-size: 26rpx;
    color: #7a7474;
  }

  .popup-content {
    background-color: #fff;
    border-radius: 14rpx;
    margin: 30rpx;
    width: 680rpx;
    height: 600rpx;
  }

  .popup-title {
    font-size: 36rpx;
    color: #2664f3;
    text-align: center;
    line-height: 80rpx;
  }

  .popup-content {
    padding: 20rpx 30rpx;

    .withdraw-tabs {
      border-radius: 10px;
      overflow: hidden;
    }

    .withdraw-money-wrap {
      padding: 50rpx 66rpx;
      border-radius: 10px;

      .withdraw-money {
        border-bottom: $-solid-border;
      }
    }

    .withdraw-wechat,
    .withdraw-alipay {
      padding: 0 36rpx 20rpx;
      border-radius: 10px;
    }

    .upload-image {
      width: 142rpx;
      height: 142rpx;
      border: 2rpx dashed #CCCCCC;
      border-radius: 5px;
    }

    .withdraw-submit {
      background: linear-gradient(11deg, #2f65f9, #48b0ec);
    }

    ::v-deep .u-field {
      padding: 26rpx 0;
    }
  }

  .popup-header {
    position: relative;
  }

  .cancle-btn {
    font-size: 34rpx;
    position: absolute;
    right: 0;
    top: 0;
  }


  /* 筛选条件 */
  .filter-section {
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid #EEEEEE;
  }

  .filter-item {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #3d3535;
  }

  .filter-item:first-child {
    margin-right: 20rpx;
  }

  .filter-item:last-child {
    margin-left: 20rpx;
    flex: 1;
    // justify-content: flex-end;
  }

  .filter-value {
    color: #3d3535;
    margin-left: 10rpx;
  }

  .tax-list1 {
    padding: 20rpx;
    font-size: 30rpx;
  }

  .items {
    line-height: 48rpx;
    height: 200rpx;
  }
  .item {
    height: 100rpx;
  }
}
</style>
